<html>
<head>
    <meta charset="UTF-8"/>
    <title>WebSocket</title>
    <script src="js/sockjs.min.js"></script>
    <script src="js/jquery-3.1.1.js"></script>
</head>
<body>
<noscript><h2 style="color: #e80b0a;">Sorry，浏览器不支持WebSocket</h2></noscript>
<div>
    <div>
        <button id="connect" onclick="connect();">连接</button>
        <button id="disconnect" disabled="disabled" onclick="disconnect();">断开连接</button>
    </div>

    <div id="conversationDiv">
        <label>输入你的名字</label><input type="text" id="name" value="hello html"/>
        <button id="sendName" onclick="sendName();">发送</button>
        <p id="showinfo"></p>
    </div>
</div>
<script type="text/javascript">
    var ws;
    var heartCheck;
    function connect() {
        ws = new WebSocket('ws://jxsbbx.gzmu.edu.cn/print');
        /**
         * 因为服务端在 300s 未传输数据时会主动关闭连接，所以，客户端需要定时发送数据保持连接。
         */
        heartCheck = {
            timeout: 100000, //10s
            timeoutObj: null,
            reset: function(){
                clearInterval(this.timeoutObj);
                this.start();
            },
            start: function(){
                this.timeoutObj = setInterval(function(){
                    if(ws.readyState === 1){
                        var msg = {from: "htm10001", to: -1, content: "heartbeat", type:"heartbeat"};
                        ws.send(JSON.stringify(msg));
                    }
                }, this.timeout)
            }
        };
        ws.onopen = function (evnt) {
            console.log("+++onopen: ", evnt);
            var msg = {from: "htm10001", to: -1, content: "request", type:"request"};
            ws.send(JSON.stringify(msg));
            heartCheck.start();
        };
        ws.onmessage = function(message){
            // 无论收到什么信息，说明当前连接正常，将心跳检测的计时器重置
            heartCheck.reset();
            console.log("client received a message.data: " + message.data);
            if (message.data != "hb_ok") {
                // 不要将ping的答复信息输出
                console.log("+++msg:" + JSON.stringify(message.data));
                //var response = JSON.parse(message.data);
                showResponse(JSON.stringify(message.data));
            }
        };
        ws.onclose  = function (event) {
            if (event.code !== 4500) {
                connect();
            }
        };
        setConnected(true);
    }

    function disconnect() {
        if (ws != null) {
            ws.disconnect();
        }
        clearInterval(heartCheck);
        setConnected(false);
        console.log("Disconnected");
    }

    function sendName() {
        var content =  document.getElementById("name").value;
        var msg = {from: "htm10001", to: "print0001", content: content, type:"messsage"};
        ws.send(JSON.stringify(msg));
    }

    function showResponse(message) {
        document.getElementById("showinfo").innerHTML = message;
    }

    function setConnected(connected) {
        document.getElementById("connect").disabled = connected;
        document.getElementById("disconnect").disabled = !connected;
        document.getElementById("conversationDiv").style.visibility = connected ? 'visible' : 'hidden';
    }
</script>
</body>
</html>